<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>群体位置</title>

  <!-- 引入bootstrap的css文件 -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
    integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
  <!-- 引入字体文件 -->
  <link rel="stylesheet" href="css/iconfont1.css">
  <link rel="stylesheet" href="css/iconfont2.css">
  <!-- 引入自定义css文件 -->
  <script>document.write('<link rel="stylesheet" href="css/main.css?time=' + new Date().getTime() + '">');</script>
  <link rel="shortcut icon" href="favicon.png">
</head>

<body class="no-margin-h bg09">
  <div class="container-fluid fill-h no-margin-h">
    <!-- 第一行 -->
    <div class="row h-title bg08">
      <!-- 第一列 -->
      <div class="col-lg-4 fill-h no-margin-h no-padding">
        <div class="container-fluid h-100">
          <!-- 标题 -->
          <div class="row h-100">
            <div class="col-12">
              <div class="contain-fluid h-100">
                <!-- 姓名标题 -->
                <div class="d-flex row h-50" style="display:none !important;" id="title_name">
                  <div class="col-7 d-flex  justify-content-center align-items-end">
                    <h1 class="no-margin-h d-inline-block" id="title_name_h1"></h1>

                    <span class="iconfont icon-htmal5icon25 font-big1_5 ml-4" id="title_name_search"
                      style="cursor:pointer;"></span>
                  </div>
                  <div class="col-5  d-flex justify-content-around align-items-end">
                    <a class="text-muted" href="personal_bigscreen.html" id="a_personal">个人画像</a>
                    <a class="text-white" href="group_bigscreen.html" id='a_group'>群体画像</a>
                  </div>
                </div>
                <!-- 搜索框 -->
                <div class="row h-50 px-2 d-flex justify-content-center align-items-center" id="search_div"
                  style="display:none !important;">
                  <div class="input-group mb-0">
                    <input type="text" class="form-control" placeholder="输入编号（0-1999）或姓名搜索"
                      aria-label="Recipient's username" aria-describedby="basic-addon2" id="search_input">
                    <div class="input-group-append" id="search_button" style="cursor:pointer;">
                      <span class="iconfont icon-htmal5icon25 input-group-text rounded-right"></span>
                    </div>
                    <div class=" border border-white" id="search_list"
                      style="min-width:100%;display:none;position: absolute;left: 0px;top: 50px;z-index: 2000; overflow-y:auto; max-height: 500%;">
                      <ul class="list-group list-group-flush text-dark" id="search_ul" style="cursor:default;">
                      </ul>
                    </div>
                  </div>
                </div>
                <!-- 基本信息标题 -->
                <div class="d-flex row h-50" style="display:none !important;" id="title_info">
                  <div class="col-12 d-flex justify-content-center align-items-center">
                    <span id="title_info_sex"></span>
                    <span>&nbsp;&nbsp;</span>
                    <span id="title_info_age"></span>
                    <span>&nbsp;&nbsp;</span>
                    <span id="title_info_nation"></span>
                    <span>&nbsp;&nbsp;</span>
                    <span id="title_info_job"></span>
                    <span>&nbsp;&nbsp;</span>
                    <span id="title_info_address"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 第二列 -->
      <div class="col-lg-8 col-sm-12 d-lg-block fill-h no-margin-h d-none">
        <div class="row h-30  d-lg-block">
          <div class="col-12 pr-4 pd-2 d-flex justify-content-end align-items-center" id="now_time">
          </div>
        </div>
        <div class="row h-70 justify-content-center" id="total_health_con" >
          <div class="col-10 h-100">
            <div class="row h-100" style="font-size:90%" id="evaluate_con"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="row h-process bg08">
      <!-- 选项 -->
      <div class="col-lg-3 h-100 text-white" style="display: none;" id="second_row_options">
        <div class="row h-5">
          <div class="col bg-secondary font-weight-bold">
            设置人群范围
          </div>
        </div>
        <div class="row h-95">
          <div class="col">
            <div class="container-fluid h-100">
              <!-- 年龄 -->
              <div class="row border-bottom border-light h-10">
                <div class="col-2 d-flex justify-content-center align-items-center no-padding">
                  年龄
                </div>
                <div class="col d-flex justify-content-start align-items-center">
                  <div id="options_age_range" class='px-2 py-1 rounded' value='false'>
                    <input type="text" class="rounded" style="width:33px;border-width: 0px;text-align: center;"
                      id="options_age_range_min">
                    -
                    <input type="text" class="rounded" style="width:33px;border-width: 0px;text-align: center;"
                      id="options_age_range_max">
                    <button class="px-1 bg-white" style="display:none; border-width: 0px;cursor: pointer;"
                      id="options_age_range_button">确认</button>
                  </div>
                </div>
                <div class="col-2 d-flex justify-content-start align-items-center no-padding">
                  <span class="px-2 py-1 rounded" style="background-color: #17A2B8;cursor: pointer;" value='true'
                    id="options_age_no">不限</span>
                </div>
              </div>
              <!-- 性别 -->
              <div class="row border-bottom border-light h-10">
                <div class="col-2 d-flex justify-content-center align-items-center no-padding">性别</div>
                <div class="col d-flex justify-content-start align-items-center" style="cursor: pointer;">
                  <span class="px-2 py-1 rounded" value='false' id="options_gender_man">男</span>
                </div>
                <div class="col d-flex justify-content-start align-items-center" style="cursor: pointer;">
                  <span class="px-2 py-1 rounded" value='false' id="options_gender_woman">女</span>
                </div>
                <div class="col-2 d-flex justify-content-start align-items-center no-padding" style="cursor: pointer;">
                  <span class="px-2 py-1 rounded" value='true' id="options_gender_no"
                    style="background-color: #17A2B8;">不限</span>
                </div>
              </div>
              <!-- 学历 -->
              <div class="row border-bottom border-light h-10">
                <div class="col-2 d-flex justify-content-center align-items-center no-padding">学历</div>
                <div class="col d-flex justify-content-start align-items-center">
                  <div class="btn-group">
                    <button type="button" class="btn btn-info btn-sm" id="options_education_name">不限</button>
                    <button type="button" class="btn btn-info btn-sm dropdown-toggle dropdown-toggle-split"
                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <span class="sr-only">Toggle Dropdown</span>
                    </button>
                    <div class="dropdown-menu" style="cursor: pointer;">
                      <a class="dropdown-item font-small9" id="options_eduction_doctor">博士</a>
                      <a class="dropdown-item font-small9" id="options_eduction_master">硕士</a>
                      <a class="dropdown-item font-small9" id="options_eduction_bachelor">本科</a>
                      <a class="dropdown-item font-small9" id="options_eduction_junior">大专</a>
                      <a class="dropdown-item font-small9" id="options_eduction_seniorhigh">高中</a>
                      <a class="dropdown-item font-small9" id="options_eduction_juniorhigh">初中</a>
                      <a class="dropdown-item font-small9" id="options_eduction_primary">小学</a>
                      <a class="dropdown-item font-small9" id="options_eduction_illiteracy">文盲或半文盲</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item font-small9" id="options_eduction_no">不限</a>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 职业 -->
              <div class="row border-bottom border-light h-20">
                <div class="col-2 d-flex justify-content-center align-items-center h-100 no-padding">职业</div>
                <div class="col h-100">
                  <!-- 大类 -->
                  <div class="row h-50">
                    <div class="col d-flex justify-content-start align-items-center">
                      <div class="btn-group mr-1">
                        <button type="button" class="btn btn-info btn-sm" id="bigjob_name">不限</button>
                        <button type="button" class="btn btn-info btn-sm dropdown-toggle dropdown-toggle-split"
                          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu" id='job_bigjob' style="cursor: pointer;"></div>
                      </div>
                    </div>
                  </div>
                  <!-- 小类 -->
                  <div class="row h-50">
                    <div class="col d-flex justify-content-start align-items-center">
                      <div class="btn-group mr-1">
                        <button type="button" class="btn btn-info btn-sm" id="smalljob_name">不限</button>
                        <button type="button" class="btn btn-info btn-sm dropdown-toggle dropdown-toggle-split"
                          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu" id='job_smalljob'
                          style="max-height: 500px;overflow-y: auto;cursor: pointer;"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 收入 -->
              <div class="row border-bottom border-light h-10">
                <div class="col-2 d-flex justify-content-center align-items-center no-padding">
                  收入
                </div>
                <div class="col d-flex justify-content-start align-items-center">
                  <div id="options_income_range" class='px-1 py-1 rounded' value='false'>
                    <input type="text" class="rounded" style="width:50px;border-width: 0px;text-align: center;"
                      id="options_income_range_min">
                    -
                    <input type="text" class="rounded" style="width:50px;border-width: 0px;text-align: center;"
                      id="options_income_range_max">
                    <button class="px-0 bg-white" style="display:none; border-width: 0px;cursor: pointer;"
                      id="options_income_range_button">确认</button>
                  </div>
                </div>
                <div class="col-2 d-flex justify-content-start align-items-center no-padding">
                  <span class="px-2 py-1 rounded" style="background-color: #17A2B8;cursor: pointer;" value='true'
                    id="options_income_no">不限</span>
                </div>
              </div>
              <!-- 婚姻 -->
              <div class="row border-bottom border-light h-10">
                <div class="col-2 d-flex justify-content-center align-items-center no-padding">婚姻</div>
                <div class="col d-flex justify-content-start align-items-center pr-0">
                  <span class="p-1 rounded" style="cursor: pointer;" value='false'
                    id="options_marriage_lonely">未婚</span>
                </div>
                <div class="col d-flex justify-content-start align-items-center no-padding">
                  <span class="p-1 rounded" style="cursor: pointer;" value='false' id="options_marriage_happy">已婚</span>
                </div>
                <div class="col d-flex justify-content-start align-items-center no-padding">
                  <span class="p-1 rounded" style="cursor: pointer;" value='false' id="options_marriage_sorry">离婚</span>
                </div>
                <div class="col d-flex justify-content-start align-items-center no-padding">
                  <span class="p-1 rounded" style="cursor: pointer;" value='false'
                    id="options_marriage_likedead">丧偶</span>
                </div>
                <div class="col-2 d-flex justify-content-start align-items-center no-padding">
                  <span class="px-2 py-1 rounded" style="cursor: pointer;background-color: #17A2B8;" value='true'
                    id="options_marriage_no">不限</span>
                </div>
              </div>
              <!-- 地区 -->
              <div class="row h-20 border-bottom border-light">
                <div class="col-2 d-flex justify-content-center align-items-center h-100 no-padding">地区</div>
                <div class="col h-100">
                  <!-- 省份 -->
                  <div class="row h-50">
                    <div class="col-2 d-flex justify-content-start align-items-center">省：</div>
                    <div class="col d-flex justify-content-start align-items-center">
                      <div class="btn-group mr-1">
                        <button type="button" class="btn btn-info btn-sm" id="province_name">不限</button>
                        <button type="button" class="btn btn-info btn-sm dropdown-toggle dropdown-toggle-split"
                          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu" id='distract_province'
                          style="overflow-y:auto;max-height: 500px;cursor: pointer;"></div>
                      </div>
                    </div>
                  </div>
                  <!-- 市 -->
                  <div class="row h-50">
                    <div class="col-2 d-flex justify-content-start align-items-center">市：</div>
                    <div class="col d-flex justify-content-start align-items-center">
                      <div class="btn-group mr-1">
                        <button type="button" class="btn btn-info btn-sm" id="city_name">不限</button>
                        <button type="button" class="btn btn-info btn-sm dropdown-toggle dropdown-toggle-split"
                          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu" id='distract_city' style="cursor: pointer;"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 提交设置 -->
              <div class="row h-10">
                <div class="col d-flex justify-content-center align-items-center pr-0">
                  <button id="options_submit" type="button"
                    class="btn btn-sm btn-primary text-white">&nbsp;&nbsp;提&nbsp;交&nbsp;设&nbsp;置&nbsp;&nbsp;</button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <!-- 雷达图 -->
      <div class="col-lg-4 h-100" id="radar"></div>
      <!-- 柱状图 -->
      <div class="col-lg-5 h-100 pr-0" id="bar"></div>
    </div>
  </div>
  <button id="zhuyi_pop" type="button" class="btn btn-sm bg-transparent zhuyi_pop" data-toggle="popover" data-placement="right"
    title="" data-content="本系统仅用于演示健康画像数据的展示，系统中使用的数据都是随机生成的！">
    <span class="text-warning iconfont icon-jinggao font-big1_5"></span>
  </button>






  <!-- 引入jQuery文件 -->
  <script src="js/jquery.min.js"></script>
  <!-- 引入bootstrap的js文件 -->
  <script src="css\bootstrap-4.4.1-dist\js\popper.min.js"></script>
  <script src="css\bootstrap-4.4.1-dist\js\bootstrap.min.js"></script>

  <!-- 引入echarts文件///////////////////////////////////////////////////////////////////////////////////////// -->
  <script src="js/echarts.min.js"></script>
  <!-- 引入自定义js文件 -->
  <script src='data/data_part.js'></script>
  <script src='data/data_person.js'></script>
  <script src='js/ChineseDistricts.js'></script>
  <script src='js/classificationOfOccupations.js'></script>
  <script>document.write('<script src="js/group.js?time=' + new Date().getTime() + '"><\/script>');</script>
</body>

</html>